import { useRef, useState } from "react";
import { useNavigate } from "react-router-dom";
import styles from "./index.module.scss";
import useDebounce from "@/hooks/useDebounce";
import { getSearch } from "@/api/search/index";
import SearchList from "./component/searchList";
import HotSearch from "./component/HotSearch";
interface It {
  name: string;
  id: number | string;
}
import History from "./component/History";
const Search = () => {
  const navigate = useNavigate();
  const inputRef = useRef<HTMLInputElement | null>();
  const [searchContenState, setsearchContenState] = useState<boolean>(false);
  const [searchList, setSearchList] = useState<It[]>([]);
  const search = async () => {
    // ! 非空断言符号
    if (inputRef.current?.value) {
      const result = await getSearch(inputRef.current!.value);
      if (result && result.length) {
        setsearchContenState(true);
        setSearchList(result);
        setHistory();
      }
    } else {
      setsearchContenState(false);
      setSearchList([]);
    }
  };

  const setInputText = (text: string) => {
    inputRef.current!.value = text;
    handleSearch();
  };

  const setHistory = () => {
    const historyList = localStorage.getItem("historyList");
    if (!historyList) {
      localStorage.setItem(
        "historyList",
        JSON.stringify([
          {
            content: inputRef.current?.value,
            id: new Date().getTime(),
          },
        ])
      );
    } else {
      const temp = JSON.parse(historyList);
      temp.push({
        content: inputRef.current?.value,
        id: new Date().getTime(),
      });
      localStorage.setItem("historyList", JSON.stringify(temp));
    }
  };

  const handleSearch = useDebounce(search, 1500);

  const hanldeSearch = () => {
    if (inputRef.current?.value.trim().length == 0) {
      return;
    }
    navigate(`/search/searchdetail`, {
      state: inputRef.current?.value,
    });
  };

  return (
    <div className={styles.Search}>
      <div className={styles.search_header_wrap}>
        <div className={styles.back_wrap} onClick={() => navigate(-1)}>
          <svg
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
          >
            <path d="M862.485 481.154H234.126l203.3-203.3c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0L135.397 489.373c-12.497 12.497-12.497 32.758 0 45.254l256.774 256.775c6.249 6.248 14.438 9.372 22.627 9.372s16.379-3.124 22.627-9.372c12.497-12.497 12.497-32.759 0-45.255l-203.3-203.301h628.36c17.036 0 30.846-13.81 30.846-30.846s-13.81-30.846-30.846-30.846z"></path>
          </svg>
        </div>
        <div className={styles.search_contaniner}>
          <div className={styles.search_wrap}>
            <div className={styles.input_wrap}>
              <input
                type="text"
                placeholder="张杰: 天下"
                onChange={() => handleSearch()}
                ref={(ref) => (inputRef.current = ref)}
              />
              <div className={styles.input_icon}>
                <svg
                  viewBox="0 0 1049 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                >
                  <path d="M1013.526731 947.650028l-225.765729-220.400182a425.116456 425.116456 0 0 0 99.174185-272.876416 443.512619 443.512619 0 1 0-443.394694 432.899448 448.111659 448.111659 0 0 0 279.421204-96.815703l225.76573 220.459144a46.63899 46.63899 0 0 0 64.858266 0 44.044659 44.044659 0 0 0 0-63.266291z m-919.808143-493.453484a350.175677 350.175677 0 0 1 700.115506 0 336.083745 336.083745 0 0 1-93.690714 232.664291 196.343661 196.343661 0 0 1-18.101353 17.688618 353.064818 353.064818 0 0 1-238.265686 91.450155 345.930409 345.930409 0 0 1-349.998791-341.97995z m0 0"></path>
                </svg>
              </div>

              {searchContenState ? (
                <div
                  className={styles.clear_icon}
                  onClick={() => {
                    inputRef.current!.value = "";
                    setsearchContenState(false);
                    setSearchList([]);
                  }}
                >
                  <svg
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                  >
                    <path d="M933.981437 165.211512l-75.00138-75.000164L512.000608 437.190797 165.019943 90.206483l-75.00138 75.000164L437.004093 512.188528 90.023428 859.167977l75.000164 75.000164 346.979449-346.979449 340.52327 340.518405 6.448881 6.45253 74.995298-74.994083-346.969718-346.973367z"></path>
                  </svg>
                </div>
              ) : (
                ""
              )}

              <div>
                {searchContenState ? (
                  <div className={styles.search_content}>
                    <SearchList
                      data={searchList}
                      title={inputRef.current?.value}
                    />
                  </div>
                ) : (
                  ""
                )}
              </div>
            </div>
          </div>
        </div>
        <div className={styles.search_text} onClick={() => hanldeSearch()}>
          搜索
        </div>
      </div>
      <div className={styles.search_history_wrap}>
        <History setSearchValue={setInputText} />
      </div>
      <div className={styles.hot_search_list_wrap}>
        <HotSearch setSearchValue={setInputText} />
      </div>
    </div>
  );
};

export default Search;
